<!DOCTYPE html>
<html lang="en">
<head>
    <title>分页表格</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="../miniuiDemo/demo.css" rel="stylesheet" type="text/css" />
    <script src="../miniuiScripts/boot.js" type="text/javascript"></script>
    <script src="js/ColumnsMenu.js" type="text/javascript"></script>
</head>
<body>
<h1>Pagination 分页表格</h1>

<div style="width:800px;">
    <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
        <table style="width:100%;">
            <tr>
                <td style="width:100%;">
                    <a class="mini-button" iconCls="icon-add" onclick="add()">增加</a>
                    <a class="mini-button" iconCls="icon-add" onclick="edit()">编辑</a>
                    <a class="mini-button" iconCls="icon-remove" onclick="remove()">删除</a>
                </td>
                <td style="white-space:nowrap;">
                    <input id="createUserName" class="mini-textbox" emptyText="请输入姓名" style="width:150px;" onenter="onKeyEnter"/>
                    <a class="mini-button" onclick="search()">查询</a>
                </td>
            </tr>
        </table>
    </div>
</div>

<div id="datagrid1" class="mini-datagrid" style="width:100%;height:250px;"
     url="../template/getAll"
     idField="id" allowResize="true"
     sizeList="[20,30,50,100]" pageSize="20"
     showHeader="true" title="表格面板"
     onmouseup="return datagrid1_onmouseup()">
    <div property="columns">
        <div type="indexcolumn" ></div>
        <div field="createUserName" width="120" headerAlign="center" allowSort="true">员工帐号</div>
        <div field="templateLayoutId" width="120" headerAlign="center" allowSort="true">姓名</div>
        <div field="templateLayoutName" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">模板名称</div>
        <div field="state" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">状态</div>
        <div field="templateLayoutCode" numberFormat="¥#,0.00" align="right" width="100" allowSort="true">薪资</div>
        <div field="templateLayoutPath" width="100" allowSort="true" decimalPlaces="2" dataType="float">年龄</div>
        <div field="approveTime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
    </div>
</div>




    <script type="text/javascript">

        mini.parse();

        var grid = mini.get("datagrid1");

        grid.load();

        var menu = new ColumnsMenu(grid);

        function search() {
            var name = mini.get("createUserName").getValue();
            grid.load({ createUserName: name});
        }
        $("#key").bind("keydown", function (e) {
            if (e.keyCode == 13) {
                search();
            }
        });
        ///////////////////////////////////////////////////////
        var Genders = [{ id: 1, text: '起草' }, { id: 16, text: '生效'}];
        function onGenderRenderer(e) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == e.value) return g.text;
            }
            return "";
        }
        function datagrid1_onmouseup() {
            alert(1);
        }

        function add() {

            mini.open({
                targetWindow: window,

                url: "templateGrid.html",
                title: "新增员工", width: 600, height: 400,
                onload: function () {
                    var iframe = this.getIFrameEl();
                    var data = { action: "new" };
                    iframe.contentWindow.SetData(data);
                },
                ondestroy: function (action) {

                    grid.reload();
                }
            });
        }
        function remove() {

            var rows = grid.getSelecteds();
            if (rows.length > 0) {
                if (confirm("确定删除选中记录？")) {
                    var ids = [];
                    for (var i = 0, l = rows.length; i < l; i++) {
                        var r = rows[i];
                        ids.push(r.templateLayoutId);
                    }
                    var id = ids.join(',');
                    grid.loading("操作中，请稍后......");
                    $.ajax({
                        url: "../insetTemplate/delete?id="+id,
                        success: function (text) {
                            grid.reload();
                        },
                        error: function () {
                        }
                    });
                }
            } else {
                alert("请选中一条记录");
            }
        }
        function edit() {
            var row = grid.getSelected();
            if (row) {
                mini.open({
                    url: "templateGrid.html",
                    title: "编辑员工", width: 600, height: 400,
                    onload: function () {
                        var iframe = this.getIFrameEl();
                        var data = { action: "edit", templateLayoutId: row.templateLayoutId};
                        iframe.contentWindow.SetData(data);
                    },
                    ondestroy: function (action) {
                        //var iframe = this.getIFrameEl();
                        grid.reload();
                    }
                });

            } else {
                alert("请选中一条记录");
            }
        }

    </script>

    <div class="description">
        <h3>Description</h3>

    </div>
</body>
</html>